{% block sw_extension_rating_stars %}
<div
    class="sw-extension-rating-stars"
    :class="editableClass"
>
    {% block sw_extension_rating_stars_wrapper %}
    <div class="sw-extension-rating-stars__wrapper">
        {% block sw_extension_rating_stars_wrapper_stars %}
        <button
            v-for="(ratingValue, key) in maxRating"
            :key="key"
            :disabled="!editable"
            class="sw-extension-rating-stars__star"
            :class="colorClass(key + 1)"
            @click="addRating(key)"
        >
            {% block sw_extension_rating_stars_wrapper_stars_full_star %}
            <mt-icon
                name="solid-star"
                :size="starSize"
            />
            {% endblock %}

            {% block sw_extension_rating_stars_wrapper_stars_partial_star %}
            <span
                v-if="showPartialStar(key)"
                class="sw-extension-rating-stars__partial-star"
            >
                {% block sw_extension_rating_stars_wrapper_stars_partial_star_wrapper %}
                <span
                    class="sw-extension-rating-stars__partial-star-wrapper"
                    :style="{ width: partialStarWidth }"
                >
                    <mt-icon
                        name="solid-star"
                        :size="partialStarSize"
                    />
                </span>
                {% endblock %}
            </span>
            {% endblock %}
        </button>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
